<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import echarts_gl from 'echarts-gl'
    import echarts from 'echarts'
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            }
        },
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.initChart()
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose();
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById(this.id));
                echarts_gl;
                function createNodes(widthCount, heightCount) {
                    var nodes = [];
                    for (var i = 0; i < widthCount; i++) {
                        for (var j = 0; j < heightCount; j++) {
                            nodes.push({
                                x: Math.random() * window.innerWidth,
                                y: Math.random() * window.innerHeight,
                                value: 1
                            });
                        }
                    }
                    return nodes;
                }

                function createEdges(widthCount, heightCount) {
                    var edges = [];
                    for (var i = 0; i < widthCount; i++) {
                        for (var j = 0; j < heightCount; j++) {
                            if (i < widthCount - 1) {
                                edges.push({
                                    source: i + j * widthCount,
                                    target: i + 1 + j * widthCount,
                                    value: 1
                                });
                            }
                            if (j < heightCount - 1) {
                                edges.push({
                                    source: i + j * widthCount,
                                    target: i + (j + 1) * widthCount,
                                    value: 1
                                });
                            }
                        }
                    }
                    return edges;
                }


                var nodes = createNodes(50, 50);
                var edges = createEdges(50, 50);

                let option = {
                    backgroundColor:'#404a59',
                    series: [{
                        type: 'graphGL',
                        nodes: nodes,
                        edges: edges,
                        itemStyle: {
                            color: 'rgba(255,255,255,0.8)'
                        },
                        lineStyle: {
                            color: 'rgba(255,255,255,0.8)',
                            width: 3
                        },
                        forceAtlas2: {
                            steps: 5,
                            jitterTolerence: 10,
                            edgeWeightInfluence: 4
                        }
                    }]
                };

                this.chart.setOption(option)
            }
        }
    }
</script>
